import {useIntl} from '@umijs/max'
import {Button, message, notification} from 'antd'
import defaultSettings from '../config/defaultSettings'

const {pwa} = defaultSettings
const isHttps = document.location.protocol === 'https:'

const clearCache = () => {
    // remove all caches
    if (window.caches) {
        caches
            .keys()
            .then((keys) => {
                keys.forEach((key) => {
                    caches.delete(key)
                })
            })
            .catch((e) => console.log(e))
    }
}

// if pwa is true
if (pwa) {
    // Notify user if offline now
    window.addEventListener('sw.offline', () => {
        message.warning(useIntl().formatMessage({id: 'app.pwa.offline'}))
    })

    // Pop up a prompt on the page asking the user if they want to use the latest version
    window.addEventListener('sw.updated', (event: Event) => {
        const e = event as CustomEvent
        const reloadSW = async () => {
            // Check if there is sw whose state is waiting in ServiceWorkerRegistration
            // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
            const worker = e.detail && e.detail.waiting
            if (!worker) {
                return true
            }
            // Send skip-waiting event to waiting SW with MessageChannel
            await new Promise((resolve, reject) => {
                const channel = new MessageChannel()
                channel.port1.onmessage = (msgEvent) => {
                    if (msgEvent.data.error) {
                        reject(msgEvent.data.error)
                    } else {
                        resolve(msgEvent.data)
                    }
                }
                worker.postMessage({type: 'skip-waiting'}, [channel.port2])
            })

            clearCache()
            window.location.reload()
            return true
        }
        const key = `open${Date.now()}`
        const btn = (
            <Button
                type="primary"
                onClick={() => {
                    notification.close(key)
                    reloadSW()
                }}
            >
                {useIntl().formatMessage({id: 'app.pwa.serviceworker.updated.ok'})}
            </Button>
        )
        notification.open({
            message: useIntl().formatMessage({id: 'app.pwa.serviceworker.updated'}),
            description: useIntl().formatMessage({id: 'app.pwa.serviceworker.updated.hint'}),
            btn,
            key,
            onClose: async () => null,
        })
    })
} else if ('serviceWorker' in navigator && isHttps) {
    // unregister service worker
    const {serviceWorker} = navigator
    if (serviceWorker.getRegistrations) {
        serviceWorker.getRegistrations().then((sws) => {
            sws.forEach((sw) => {
                sw.unregister()
            })
        })
    }
    serviceWorker.getRegistration().then((sw) => {
        if (sw) sw.unregister()
    })

    clearCache()
}
